import React, { useEffect, useState, useCallback, useMemo } from "react";
import { Search } from "react-vant";
import { DownFill, BellOutline } from "antd-mobile-icons";
import { PullRefresh, List, Tabs, Cell, Toast } from "react-vant";
import { useNavigate } from "react-router-dom";

import Tu from "../../../components/Tu/index";
import Yi from "../../../components/Yi/index";
import Gua from "../../../components/Gua/index";
import Ke from "../../../components/Ke/index";
import Ai from "../../../components/Ai/index";
import Swo from "../../../components/Swo/index";
import axios from "../../../utils/index";
import style from "./index.module.css";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [lista, setLista] = useState<any>([]);
  const [finished, setFinished] = useState<boolean>(false);
  const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
  const aaa = async () => {
    const res = await axios.get("/api/list");
    if (res.data.code === 200) {
      setLista(res.data.list);
    }
  };

  useEffect(() => {
    aaa();
  }, []);
  useEffect(() => {
    const intervalIdRef = setInterval(aaa, 5000);
    return () => clearInterval(intervalIdRef);
  }, []);
  const ding = () => {
    navigate("/ding");
  };
  const xq = (item: any) => {
    navigate(`/detail/` + item.id, { state: { item } });
  };

  const onLoad = useCallback(async () => {
    const res = await axios.get("/api/list");
    setTimeout(() => {
      if (res.data.code === 200) {
        setLista([...lista, ...res.data.list]);
      }
    }, 5000);
  }, [lista]);

  const onRefresh = useCallback(async () => {
    setIsRefreshing(true);
    try {
      await aaa();
    } catch (error) {
    } finally {
      setIsRefreshing(false);
    }
  }, []);
  const xi = () => {
    navigate("/xi");
  };
  const mn = () => {
    navigate("/doctor");
  };

  const cs = localStorage.getItem("city");

  return (
    <div>
      <PullRefresh
        pullingText="下拉刷新"
        onRefresh={onRefresh}
        successText="刷新成功"
      >
        <span className={style.ling} onClick={xi}>
          <BellOutline />
        </span>
        <div className={style.aa}>
          <h3 onClick={ding}> 健康{cs} </h3>
          <span span className={style.bb}>
            <DownFill />
          </span>
          <span span onClick={() => navigate("/search")}>
            <Search clearable shape="round" placeholder="找医生、找医院" />
          </span>
          <span span className="ling">
            <BellOutline
              onClick={xi}
              style={{ marginTop: "15px", fontSize: "30px" }}
            />
          </span>
        </div>

        <Gua> </Gua>

        <Tu> </Tu>

        <div div className={style.oo7} onClick={() => navigate("/control")}>
          <img
            src="../src/assets/608.jpg"
            alt=""
            style={{ width: "100%", height: "100%" }}
          />
        </div>

        <Yi> </Yi>

        <div className={style.m7}>
          <div className={style.y1}>
            <h2 className={style.y2}> 我的医生 </h2> 我看过的医生 随时联系
          </div>
          <div className={style.y3} onClick={mn}>
            <img
              src="../src/assets/100_03.jpg"
              alt=""
              style={{ height: "100%" }}
            />
            <div>
              <h3 className={style.y4}>
                <span style={{ color: "#000" }}> 李凤娇 </span> 住院医生
              </h3>
              <p className={style.y5}>
                <span style={{ color: "#ccc" }}> 北京京都儿童医院 </span>{" "}
                <span span style={{ color: "#ccc" }}>
                  {" "}
                  皮肤病{" "}
                </span>
              </p>
            </div>
          </div>
        </div>

        <Ke> </Ke>

        <Ai> </Ai>

        <Swo> </Swo>

        <List
          List
          finished={finished}
          onLoad={onLoad}
          finishedText="没有更多了"
        >
          {lista.length > 0 &&
            lista.map((item: any, index: number) => (
              <div key={index} onClick={() => xq(item)}>
                <div className={style.xuan}>
                  <h2 className={style.wen}> {item.title} </h2>
                  <div className={style.quan}>
                    <div className={style.li}>
                      <img
                        src={item.img2}
                        alt=""
                        style={{ width: "50px", height: "50px" }}
                      />
                      <div>
                        <p className={style.wei1}> {item.wei} </p>
                        <p className={style.wei2}> {item.mai} </p>
                      </div>
                    </div>
                    <div className={style.li1}>
                      <img
                        src={item.img1}
                        alt=""
                        style={{ width: "100px", height: "100px" }}
                      />
                    </div>
                  </div>
                  <div className={style.yue}> {item.count} 阅读 </div>
                </div>
              </div>
            ))}
        </List>
      </PullRefresh>
    </div>
  );
};
export default Index;
